<template class="flex mybg">
  <div class="h-screen w-screen flex mybg">
    <div class="flex items-center justify-evenly glass m-auto flex-col h-4/6 w-8/12 rounded-3xl shadow-2xl card">
      <p class="select-none text-3xl text-shadow text-black text-opacity-60"
      >{{titletext}}</p>
      <div class="flex flex-wrap my-16 relative justify-center">
        <input
          class="z-10 h-full w-full codeipt opacity-0 select-none absolute outline-0"
          maxlength="8"
          @keydown.left.tab="(e)=>{ e.preventDefault() }"
          ref="codeinput"
          v-model="code"
        >
        <span 
          v-for="(a,i) in code.length?code.split('').concat(new Array(8-code.length)):'请输入验证码登录'"
          :key="`input${i}`"
          style="line-height:35px;color:#0009"
          :class="{iptthis:i===code.length,noinput:!code.length}"
          class="select-none inline-block text-lg glass text-shadow h-10 w-10 m-1 outline-none text-center p-0"
        >
          {{a?(code.length?'●':a):''}}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import { ElMessage,ElLoading } from 'element-plus'
import { doLogin } from '@/api/oper'
import { useStore } from "vuex"
import { fill } from 'lodash'
import func from "vue-temp/vue-editor-bridge"
import { timeSleep } from '@/utils/functions'
import { setStora } from '@/utils/localstore'
const titletext = 'Start River Cup - SUPER'
let code = ref('')
const codeinput = ref(null)

watch(code,async newV=>{
  if(newV.length === 8) loginmain(newV)
})

const router = useRouter()
const store = useStore()
const loginmain = async (thiscode) => {
  const loading = ElLoading.service({
    lock: true,
    text: '验证中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await timeSleep(500)
  await doLogin({code:thiscode})
  .then(e=>{
    ElMessage.success("验证成功")
    store.commit('SET_TOKEN',e.token)
    setStora('SRC_LOGS',e.logs)
    router.push({name:'spsrcmain'})
  })
  .catch(()=>{})
  code.value = ''
  loading.close()
}
</script>

<style scoped lang="scss">
.mybg{
  // 粉色的天空和太阳
  // background:radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal;
  // 黄蓝紫切分
  // background: linear-gradient(90deg, red 0% 16.67%, yellow 16.67% 33.33%, lime 33.33% 50%, cyan 50% 66.67%, blue 66.67% 83.33%, magenta 83.33% 100%), conic-gradient(from 180deg, red 0%, yellow 0 16.67%, lime 0 33.33%, cyan 0 50%, blue 0 66.67%, magenta 0 83.33%, red 0 100%);
  // background-blend-mode: screen, normal;
  // 蓝粉斜切
  background: linear-gradient(288deg, #FFB6B9 0%, #FFB6B9 35%, #FAE3D9 calc(35% + 1px), #FAE3D9 45%, #BBDED6 calc(45% + 1px), #BBDED6 65%, #61C0BF calc(65% + 1px), #61C0BF 100%);
  // 梦幻的粉色
  // background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%);
  // background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
}
.glass{
  background-color: rgba(255, 255, 255, .3);
  backdrop-filter: blur(3px);
  border-left: 2px solid rgba(255, 255, 255, .3);
  border-top: 2px solid rgba(255, 255, 255, .3);
}
.text-shadow{
  text-shadow:2px 2px 4px rgba(0, 0, 0, .2);
}

.codeipt{
  cursor: pointer;
  & ~ .iptthis{
    // transition: all 1s;
  }
  &:focus{
    & ~ .iptthis{
      
      &::after{
        content: 'I';
        font-size: 1.5rem;
        font-family: Cambria;
        animation: focusani 1s infinite;
      }
    }
    & ~ .noinput{
      font-size:0px;
    }
  }
}
@keyframes focusani {
  0% {opacity:0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}


</style>